<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 导入css文件 -->
    <link rel="stylesheet" href="css/index.css">
<!--    <link rel="stylesheet" href="css/base.css">-->
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/cdn.axios.js"></script>
</head>
<body>
<div id="root">
    <!-- 导航栏部分 -->
    <div class="nav">
        <ul class="leftnav">
            <li class="btli"><a href="index.html">主页</a></li>
            <li class="btli xiala"><a href="#">宠物知识</a>
                <ul class="droplist">
                    <li><a href="knowledge_one.html">领养须知</a></li>
                    <li><a href="knowledge_two.html">宠物医疗</a></li>
                    <li><a href="knowledge_three.html">饲养百科</a></li>
                </ul>
            </li>
            <li class="btli"><a href="adopt.html">领养中心</a></li>
        </ul>
        <ul class="rightnav">
            <li class="rbtli login"><a href="login.html" v-show="login">登录</a></li>
            <li class="rbtli logout chu"><span @click="del" v-show="logout">登出</span></li>
            <li class="rbtli logout">
                <span class="user chu" v-show="logout">{{name}}</span>
            </li>
        </ul>
    </div>
    <!-- 轮播图部分 -->
    <div class="carousel">

        <!-- 图片区域 -->
        <ul>
            <li><img src="images/cat1.jpg" alt=""></li>
            <li><img src="images/dog1.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/dog2.jpg" alt=""></li>
        </ul>

        <!-- 圆点 -->
        <ol class="circle">

        </ol>

        <!-- 左右控制按钮 -->

        <i class="iconfont arrow-l">&#xe660;</i>
        <i class="iconfont arrow-r">&#xe65f;</i>
    </div>
    <!-- 页脚部分 -->
    <div class="footer">
        <div class="container">
            <!-- 网站简介 -->
            <div class="profile">
                <h1>网站简介</h1>
                <p class="footer-p1">
                    该网站是用于想领养宠物和想成为我们其中一员，那么你将再这里实现你的想法。
                    如果你是领养者，请认真选取想要领养的宠物领养后，请认真负责对待可爱的猫狗！
                    如果你是想成为志愿者，请联系我们，我们欢迎任何爱心认识，加入我们！
                </p>
            </div>

            <!-- 宠物展示 -->

            <div class="display">
                <h1>宠物展示</h1>
                <div class="imgs">
                    <img src="images/1.jpg" alt=" " >

                    <img src="images/5.jpg" alt=" " >

                    <img src="images/6.jpg" alt=" " >

                    <img src="images/7.jpg" alt=" " >

                    <img src="images/8.jpg" alt=" " >

                    <img src="images/10.jpg" alt=" " >

                </div>
            </div>

            <!-- 联系方式 -->

            <div class="contact">
                <h1>联系方式</h1>
                <p>电话&nbsp;&nbsp;<span>14390872021</span></p>
                <br>
                <p>邮件&nbsp;&nbsp;<span>CatDog@aliyun.com</span></p>
                <br>
                <p>官网&nbsp;&nbsp;<span>www.pet.com</span></p>
                <br>
                <p><span class="go" onclick="goToManager_login()">管理员登录</span></p>
            </div>
        </div>
    </div>
</div>
<script>

    const {createApp} = Vue;
    createApp({
        data() {
            return {
                login:true,
                logout:false,
                name:"",
            }
        },

        created() {
            this.name = JSON.parse(localStorage.getItem('nickname'));
            this.judge();
        },
        methods: {
            del() {
                localStorage.clear();
                this.judge();
                location.reload();
            },
            judge() {
                if (this.name) {
                    this.login = false;
                    this.logout  = true;
                } else {
                    this.login = true;
                    this.logout  = false;
                }
            },
        }
    }).mount('#root')

</script>
</body>
</html>